<template>
  <el-container class="h-[calc(100vh-1.25rem-4rem-3rem)]">
    <el-container class="mr-5">
      <el-main
        ref="cameraContainerRef"
        class="bg-white mb-5 rounded shadow-xl text-[#409EFF] p-0 overflow-hidden"
      >
        <CameraPlayer :data="cameraData"></CameraPlayer>
      </el-main>
      <el-footer class="bg-white rounded shadow-xl h-48 p-2">
        <RobotInformation :robot-code="robotCode"></RobotInformation>
      </el-footer>
    </el-container>
    <el-aside class="w-96 flex flex-col justify-between shadow-xl">
      <el-scrollbar class="bg-white h-1/2 rounded shadow-xl w-full">
        <div class="p-2 text-[#409EFF]">机器人</div>
        <el-table
          v-loading="loading"
          :data="data"
          :stripe="true"
          :border="true"
          table-layout="auto"
          class="w-full"
          highlight-current-row
          @current-change="handleCurrentChange"
        >
          <el-table-column
            prop="name"
            label="名称"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="status"
            label="状态"
            header-align="center"
            align="center"
          />
          <el-table-column label="操作" header-align="center" align="center">
            <template #default="{ row }">
              <span
                v-if="row.code !== curPlayRobotCode"
                class="text-green-500 cursor-pointer"
                @click="handlePlayback(row)"
                >▶</span
              >
              <span v-else class="cursor-pointer" @click="stopPlay">⏸</span>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
      <el-scrollbar
        class="bg-white h-[48%] rounded shadow-xl w-full p-5 box-border"
      >
        <RobotStatus :data="robotStatusData"></RobotStatus>
      </el-scrollbar>
    </el-aside>
  </el-container>
</template>

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref, watch } from "vue";
import { robotArchives } from "../../api/robotArchives";
import { controlVideo } from "../../api/robotControl";
import { robotStatus } from "../../api/robotStatus";
import CameraPlayer from "../../components/CamerPlayer.vue";
import RobotInformation from "./components/RobotInformation.vue";
import RobotStatus from "./components/RobotStatus.vue";

// 机器人表格数据
const data = ref([]);

// 没用
const cameraContainerHeight = ref("");

// 没用
const cameraContainerRef = ref();

onMounted(() => {
  cameraContainerHeight.value = `${cameraContainerRef.value.$el.clientHeight}px`;
  getRobotList();
});

// 对应机器人的视频数据
const cameraData = ref({});

// 当前播放视频的机器人编号
const curPlayRobotCode = ref("");

// 当前选中的机器人
const robotCode = ref("");

// 点击播放按钮
async function handlePlayback(row) {
  // 先通知之前放视频的机器人关闭视频
  await handleVideo(curPlayRobotCode.value, false);
  curPlayRobotCode.value = row.code;
  await handleVideo(row.code, true);
  cameraData.value = {
    type: "stream",
    data: `webrtc://srs.zhenxiangsimple.cn/video/${row.code}`,
  };
}

// 机器人表格数据加载 loading
const loading = ref(false);

// 获取机器人表格数据
async function getRobotList() {
  loading.value = true;
  try {
    const res = await robotArchives.queryAll({
      limit: 99999,
      RType: "DCInspection",
    });
    data.value = res.data.list;
  } finally {
    loading.value = false;
  }
}

// 右下角机器人状态数据
const robotStatusData = ref({});

// 用于取消对机器人状态的轮询
let st;

// 实时获取机器人状态数据
async function getRobotStatus(code) {
  clearTimeout(st);
  const res = await robotStatus.getOne(code);
  robotStatusData.value = res.data || {};
  st = setTimeout(() => {
    getRobotStatus(code);
  }, 5000);
}

// 关闭视频播放
async function stopPlay() {
  await handleVideo(curPlayRobotCode.value, false);
  curPlayRobotCode.value = "";
  cameraData.value = {};
}

onBeforeUnmount(() => {
  clearTimeout(st);
  handleVideo(curPlayRobotCode.value, false);
});

// 通知机器人开启还是关闭时评
async function handleVideo(code: string, open: boolean) {
  if (!code) return;
  const data = {
    enable: open ? "1" : "0",
    robot: code,
    url: `rtmp://srs.zhenxiangsimple.cn/video/${code}`,
  };
  await controlVideo(data);
}

// 切换选中机器人
function handleCurrentChange(row) {
  getRobotStatus(row.code);
  robotCode.value = row.code;
}

// 切换到机器人切换关闭视频播放
watch(robotCode, stopPlay);
</script>

<style scoped lang="scss">
:deep(.el-table) {
  tr {
    cursor: pointer;
  }
  .current-row {
    td {
      background-color: #a0cfff !important;
      color: white;
    }
  }
}
</style>
